<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="order-info">
      <el-card v-loading="orderInfoLoading" class="box-card">
        <el-row>
          <el-col :span="10" :offset="2">单据编号：{{ purchase.warehouseOrderNo }}</el-col>
          <el-col v-if="customerType === '1'" :span="10" :offset="2">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ purchase.warehouseOrderState | formatStatus }}</el-col>
          <el-col v-if="customerType === '2'" :span="10" :offset="2">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ purchase.warehouseOrderState | formatReturnStatus }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库：{{ purchase.warehouseName }}</el-col>
          <el-col :span="10" :offset="2">创建时间：{{ purchase.gmtCreate | formatDateAndTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">操&nbsp;&nbsp;作&nbsp;&nbsp;人：{{ purchase.adminRealname }}</el-col>
          <el-col :span="10" :offset="2">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{{ purchase.warehouseOrderInfo }}</el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      v-if="customerType === '1'"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="white-space: pre-line"
    >
      <el-table-column prop="goodsName" align="center" label="商品"/>
      <el-table-column prop="goodsUnit" align="center" label="商品单位"/>
      <el-table-column prop="goodsBarCode" align="center" label="商品条形码"/>
      <el-table-column prop="warehouseGoodsBuyNum" align="center" label="数量"/>
      <el-table-column prop="warehouseGoodsPrice" align="center" label="单价"/>
      <el-table-column prop="warehouseGoodsAmount" align="center" label="入库金额"/>
    </el-table>
    <el-table
      v-loading="listLoading"
      v-if="customerType === '2'"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="white-space: pre-line"
    >
      <el-table-column prop="spuName" align="center" label="商品"/>
      <el-table-column prop="goodsUnit" align="center" label="商品单位"/>
      <el-table-column prop="barCode" align="center" label="商品条形码"/>
      <el-table-column prop="goodsReturnNum" align="center" label="数量"/>
      <el-table-column prop="goodsPrice" align="center" label="单价">
        <template slot-scope="scope">
          <el-col>{{ (scope.row.goodsPrice/100).toFixed(2) }}</el-col>
        </template>
      </el-table-column>
      <el-table-column align="center" label="退库总额">
        <template slot-scope="scope">
          <el-col>{{ ((scope.row.goodsPrice *scope.row.goodsReturnNum) /100).toFixed(2) }}</el-col>
        </template>
      </el-table-column>
    </el-table>
    <div class="filter-container" style="margin-top:10px;margin-left:60px">
      <el-item>总金额：<span style="color:red;padding-right: 10px;"> {{ payable.paymentAllAmount }} </span> </el-item>
      <el-item>优惠金额：<span style="color:red;padding-right: 10px;"> {{ payable.paymentYouhuiAmount }} </span></el-item>
      <el-item>未结金额：<span style="color:red;padding-right: 10px;"> {{ payable.paymentAmount - payable.finishAmount }} </span></el-item>
      <el-item>已结金额：<span style="color:red;padding-right: 10px;"> {{ payable.finishAmount }} </span></el-item>
    </div>
    <div class="filter-container" style="margin-top:10px">
      <el-item>结算记录</el-item>
    </div>
    <el-table
      v-loading="listLoading"
      :data="logList"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="white-space: pre-line"
    >
      <el-table-column prop="adminName" align="center" label="经手人"/>
      <el-table-column prop="payLogAmount" align="center" label="金额"/>
      <el-table-column prop="gmtCreate" align="center" label="时间">
        <template slot-scope="scope">{{ scope.row.gmtCreate | formatGmt }}</template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style>
.el-table .cell {
  white-space: pre-line;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.order-info .el-row {
    margin-bottom: 20px;
  }
</style>

<script>
import { detail } from '@/api/financepayable'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'AccountsReceivable',
  components: { Pagination },
  filters: {
    formatStatus(status) {
      if (status === 1) {
        return '已入库'
      } else if (status === 0) {
        return '待入库'
      } else if (status === -1) {
        return '驳回'
      }
    },
    formatReturnStatus(status) {
      if (status === 1) {
        return '已通过'
      } else if (status === 0) {
        return '待审核'
      } else if (status === 2) {
        return '驳回'
      }
    }
  },
  data() {
    return {
      statusMap: [{ value: 0, name: '禁用' }, { value: 1, name: '正常' }],
      purchase: {},
      payable: {},
      list: undefined,
      logList: undefined,
      listLoading: true,
      id: this.$route.query.id,
      customerType: this.$route.query.type,
      listQuery: {
        id: this.$route.query.id,
        customerType: this.$route.query.type
      },
      options: [],
      dataForm: {
        id: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      detail(this.listQuery)
        .then(response => {
          this.purchase = response.data.data
          var listA = []
          if (this.customerType === '1') {
            listA = response.data.data.purchaseWarehouseOrderGoodsDOs
          } else if (this.customerType === '2') {
            listA = response.data.data.purchaseOrderReturnGoodsDOS
          }
          for (var i = 0; i < listA.length; i++) {
            if (this.customerType === '1') {
              listA[i].warehouseGoodsPrice = listA[i].warehouseGoodsPrice / 100
              listA[i].warehouseGoodsAmount = listA[i].warehouseGoodsAmount
            }
          }
          this.list = listA
          var ligListA = response.data.data.financePayablelogDO
          for (var j = 0; j < ligListA.length; j++) {
            ligListA[j].payLogAmount = ligListA[j].payLogAmount / 100
          }
          this.logList = ligListA
          this.payable = response.data.data.financePayableDO
          this.payable.paymentAllAmount = this.payable.paymentAllAmount / 100
          this.payable.paymentYouhuiAmount = this.payable.paymentYouhuiAmount / 100
          this.payable.paymentAmount = this.payable.paymentAmount / 100
          this.payable.finishAmount = this.payable.finishAmount / 100
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined
      }
    }
  }
}
</script>

